<template>
    <el-form :model="form" :inline="true" :rules="rules">
        <div class="basic">
            <div class="edu-page-title mg-top">常用信息</div>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="学号：" :label-width="formLabelWidth" prop="studentId">
                            <el-input
                                v-model="form.studentId"
                                placeholder="请输入"
                                @blur="getDetailById"
                                @keyup.enter.native="getDetailById"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名：" :label-width="formLabelWidth" prop>
                            <el-input v-model="form.name" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="曾用名：" :label-width="formLabelWidth" prop>
                            <el-input v-model="form.name" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="拼音/英文名：" :label-width="formLabelWidth" prop>
                            <el-input v-model="form.name"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="性别：" :label-width="formLabelWidth">
                            <el-select v-model="form.gender">
                                <el-option
                                    v-for="item in options.gender"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出生日期：" :label-width="formLabelWidth">
                            <el-date-picker v-model="form.birth" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="身高：" :label-width="formLabelWidth" prop>
                            <el-input v-model="form.height"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="体重：" :label-width="formLabelWidth" prop>
                            <el-input v-model="form.weight"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="健康状况：" :label-width="formLabelWidth">
                            <el-select v-model="form.jkzz">
                                <el-option
                                    v-for="item in options.jkzz"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="血型：" :label-width="formLabelWidth">
                            <el-select v-model="form.xx">
                                <el-option
                                    v-for="item in options.xx"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="独生子女：" :label-width="formLabelWidth">
                            <el-select v-model="form.dszn">
                                <el-option label="是" value="1"/>
                                <el-option label="否" value="0"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="婚姻状况：" :label-width="formLabelWidth">
                            <el-select v-model="form.hyzk">
                                <el-option label="已婚" value="1"/>
                                <el-option label="未婚" value="0"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="contact">
            <div class="edu-page-title mg-top">联系方式</div>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="手机号码：" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="form.phone"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系电话：" :label-width="formLabelWidth">
                            <el-input v-model="form.concat"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email">
                            <el-input v-model="form.email"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="微信：" :label-width="formLabelWidth" prop="email">
                            <el-input v-model="form.wechat"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="QQ号码：" :label-width="formLabelWidth" prop="email">
                            <el-input v-model="form.qq"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <div class="empty-box"></div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="info">
            <div class="edu-page-title mg-top">地址信息</div>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="国家：" :label-width="formLabelWidth">
                            <el-select v-model="form.gj">
                                <el-option
                                    v-for="item in options.gj"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="民族：" :label-width="formLabelWidth">
                            <el-select v-model="form.mz">
                                <el-option
                                    v-for="item in options.mz"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="籍贯：" :label-width="formLabelWidth">
                            <el-input v-model="form.jg" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出生地：" :label-width="formLabelWidth">
                            <el-input v-model="form.csd" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="生源地：" :label-width="formLabelWidth">
                            <el-select v-model="form.syd">
                                <el-option
                                    v-for="item in options.syd"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="终点站：" :label-width="formLabelWidth" prop="zdz">
                            <el-select v-model="form.zdz">
                                <el-option
                                    v-for="item in options.zdz"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="户口地址：" :label-width="formLabelWidth">
                            <el-select v-model="form.hkdz">
                                <el-option
                                    v-for="item in options.hkdz"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="户口邮编：" :label-width="formLabelWidth">
                            <el-select v-model="form.hkyb">
                                <el-option
                                    v-for="item in options.hkyb"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="通信地址：" :label-width="formLabelWidth">
                            <el-input v-model="form.txdd" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="通信邮编：" :label-width="formLabelWidth">
                            <el-input v-model="form.txyb" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <div class="empty-box"></div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div>
            <div class="edu-page-title mg-top">政治面貌</div>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="政治面貌：" :label-width="formLabelWidth" prop>
                            <el-select v-model="form.zzmm">
                                <el-option
                                    v-for="item in options.zzmm"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属党支部:" :label-width="formLabelWidth">
                            <el-input v-model="form.ssdzb"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入团时间:" :label-width="formLabelWidth">
                            <el-input v-model="form.rtsj"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入党时间:" :label-width="formLabelWidth">
                            <el-input v-model="form.rdsj"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="是否军人：" :label-width="formLabelWidth" prop>
                            <el-select v-model="form.sfjr">
                                <el-option key="是" label="1"/>
                                <el-option key="否" label="0"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <div class="empty-box"></div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="work">
            <div class="edu-page-title mg-top">工作情况</div>
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="是否在职：" :label-width="formLabelWidth" prop="phone">
                            <el-select v-model="form.sfzz">
                                <el-option key="是" label="1"/>
                                <el-option key="否" label="0"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工龄：" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="form.gl"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工作单位：" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="form.gzdw"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单位地址：" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="form.dwdz"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="单位邮编：" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="form.dwyb"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备注：" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="form.remark"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="float-right">
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="submitData">提交</el-button>
        </div>
    </el-form>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
export default {
    data() {
        return {
            form: {},
            rules: {},
            options: {},
            formLabelWidth: "120px"
        };
    },
    mounted() {
        this.initOptions();
    },
    methods: {
        initOptions() {
            //获取数据字典数据
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                // 性别，健康状况，血型，婚姻状况，国家，民族，籍贯，出生地，生源地，政治面貌
                keys: [
                    "G_XBIE",
                    "G_JKZK",
                    "G_XX",
                    "G_HYZK",
                    "G_GJQU",
                    "G_MZ",
                    "G_XZQY",
                    "G_ZZMM",
                    "K_SSFW"
                ]
            };
            queryDic(data).then(res => {
                let {
                    code,
                    data: { G_XBIE, G_JKZK, K_SSFW }
                } = res;
                if (code === 200) {
                    console.log(K_SSFW);
                    // this.dialogConfig.options.trainingLevel = Object.keys(
                    //     X_PYCC
                    // ).map(key => ({ label: X_PYCC[key], value: key }));
                    // this.dialogConfig.options.studentCategory = Object.keys(
                    //     X_PYLB
                    // ).map(key => ({ label: X_PYLB[key], value: key }));
                }
            });
        }
    }
};
</script>
<style>
</style>
